<template>
  <ZWSearch row-num="2" :option="searchOption" @search="search" @reset="reset" />
  <ZWTable
    ref="TableGraphicRef"
    tabH="400px"
    :multiple="props.multiple"
    :option="tableOption"
    :fetch-params="state.searchParams"
    :fetch-api="fetchApi()"
    @select="onSelect"
    @select-all="onSelectAll"
  />
</template>

<script setup lang="tsx">
  import { reactive, ref, onMounted,computed, watch, nextTick } from 'vue'
  import { ElMessage } from 'element-plus'
  import Dialog from '@/components/Dialog.vue'
  import {getStoreList, getStoreSourceList} from '@/api/ecommerce/storeManage'
  import {getOfficeAccountList} from '@/api/channelconfig/officeAccount'
  import {getOfficialArticleList} from '@/api/content/channelFootage/officialaccountgraphics'
  import ZWSearch from '@/components/zw/search-form/SearchForm'
  import ZWTable from '@/components/zw/table/Table'
  import { deepCopy } from '@/utils/helper'
  import ArticleDetail from '@/components/common/ArticleDetail.vue'

  const TableGraphicRef = ref<HTMLElement | null>()
  const selectedArr = reactive<any>([])
  const publishState:{
    id: string,
    name: string
  }[] = [
    {
      id: '0',
      name: '全部'
    },
    {
      id: '1',
      name: '发布中'
    },
    {
      id: '2',
      name: '发布成功'
    },
    {
      id: '3',
      name: '发布失败'
    }
  ]

  interface Props {
    multiple: boolean
    articleType: number
  }

  const props = withDefaults(defineProps<Props>(),{
	  multiple: true,
    articleType: 0
	})

  const emit = defineEmits(['submit'])

  const defaultParams = {
    page: 1,
    page_size: 15
  };
  const state = reactive({
    searchParams: deepCopy(defaultParams)
  })
  const searchOption = computed(() => {
    return [
      {
        label: '标题搜索',
        name: 'draft_title',
        value: '',
        type: 'input',
        placeholder: '请输入标题搜索'
      },
      {
        label: "公众号",
        name: "official_account_id",
        value: "",
        type: "select",
        placeholder: "请选择公众号",
        fetchOptionApi: () => {
          return new Promise((resolve) => {
            let params = {
              page: 1,
              page_size: 100,
              verify_type_info: 0
            }
            getOfficeAccountList(params).then((res: any) => {
              let optionsArr: any = [];
              res.data.forEach((item: any) => {
                optionsArr.push(item);
                resolve(optionsArr);
              });
            });
          });
        },
        formatOption: (v: any) => ({
          label: v.nick_name,
          value: v.id
        }),
      },
      {
        label: "发布状态",
        name: "publish_state",
        value: "",
        type: "select",
        placeholder: "请选择发布状态",
        optionList: publishState,
        formatOption: (v: any):any => ({
          label: v.name,
          value: v.id
        }),
      }
    ]
  })
  const tableOption = computed(() => [
    {
      type: 'selection',
      width: 60,
      fixed: 'left'
    },
    {
      prop: 'created_time',
      label: '发布日期',
      width: 200,
      render({ row }:any) {
        return row.created_time || '--'
      }
    },
    {
      prop: 'draft_title',
      label: '标题',
      width: 260,
      render({ row }:any) {
        if(row?.article_detail?.length == 1){
          return (
            <>
              <div>{row.draft_title || '--'}</div>
              <div style="display: flex;align-items: center;">
                <div style="width: 32px;height: 32px;border-radius:8px;overflow:hidden;">
                  <img v-show={row.article_detail[0]?.cover} style="width: 32px;height: 32px;" src={row.article_detail[0]?.cover} alt="" />
                </div>
                <div style="margin: 0 4px;flex: 1;">{row.article_detail[0]?.title}</div>
              </div>
            </>
          )
        }else if(row?.article_detail?.length > 1){
          return (
            <>
              <div>{row.draft_title || '--'}</div>
              <ArticleDetail content={row.article_detail} onFold={(flag:boolean)=>{
                if(flag){
                  nextTick(()=>{
                    TableGraphicRef.value?.doLayout()
                  })
                }
              }}/>
            </>
          )
        }else{
          return row.draft_title || '--'
        }
      }
    },
    {
      prop: 'type',
      label: '图文类型',
      width: 220,
      render({ row }:any) {
        return row.type || '--'
      }
    },
    {
      prop: 'official_name',
      label: '公众号',
      width: 260,
      render({ row }:any) {
        const {official_cover: official_cover = '', official_name: official_name = ''} = row
        return (
          <div style="display: flex;align-items: center;">
            <div style="width: 24px;height: 24px;border-radius:50%;overflow:hidden;">
              <img v-show={official_cover} style="width: 100%;height: 100%;" src={official_cover} alt="" />
            </div>
            <div style="margin: 0 4px;">{official_name || '--'}</div>
          </div>
        )
      }
    },
    {   //
      prop: 'publish_status',
      label: '发布状态',
      width: 220,
      render({ row }:any) {
        return row.publish_status || '--'
      }
    }
  ])

  const search = (data: any):void=>{
    state.searchParams = data
  }
  const reset = (v:any):void => {
    state.searchParams = deepCopy(defaultParams)
  }

  const fetchApi = ():any => {
    return new Promise((resolve:any):any=>{
      const type:number = 2
      let params = {type}
      if(props.articleType > 0){
        params['article_detail_type'] = props.articleType
      }
      resolve([params, getOfficialArticleList])
    })
  }

  const onSelect = (selection: any, row: any):void => {
     if (props.multiple) {
      selectedArr.splice(0)
      selectedArr.push(...selection)
    } else {
      selectedArr.splice(0)
      selectedArr.push(row)
    }
    emit('submit', selectedArr)
  }

  const onSelectAll = (selection: any):void => {
    selectedArr.splice(0)
    selectedArr.push(...selection)
    emit('submit', selectedArr)
  }

</script>

<style lang="scss" scoped>

</style>
